<template>
  <div class="main">
    <Navigation></Navigation>
    <scroll-container ref="scrollContainer">
      <div class="container-list">
        <multi-list @scrollTo="scrollTo" :groupDatas="groupDatas" :head="head">
          <div class="category-list">
            <div v-for="(item,index) in groupDatas.dataArr[0].data" :key="index"
                 :class="{nav1_foc: groupDatas.focArr[0][index]}"
                 class="nav1_0 category">
              <!--<img :src="item.cover" class="nav1_img" alt>-->
              <img :src="item.cover" class="nav1_img" alt>
            </div>
          </div>
          <imglist_w384 :groupData="groupDatas.dataArr[1]" :focArr="groupDatas.focArr[1]" :group="1"></imglist_w384>
          <imglist_w298 :groupData="groupDatas.dataArr[2]" :focArr="groupDatas.focArr[2]" :group="2"></imglist_w298>
          <imglist_w384 :groupData="groupDatas.dataArr[3]" :focArr="groupDatas.focArr[3]" :group="3"></imglist_w384>
          <imglist_w384 :groupData="groupDatas.dataArr[4]" :focArr="groupDatas.focArr[4]" :group="4"></imglist_w384>
        </multi-list>
      </div>
    </scroll-container>
    <personal ref="personal"
              v-show="showPersonal"
              :personalBg="personalBg"
              @closePersonal="closePersonal"
              :changePersonal="changePersonal"
    ></personal>
  </div>
</template>

<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import Navigation from "@/components/Navigation";
  import imglist_w384 from "../ImgList_w384";
  import imglist_w298 from "../ImgList_w298";
  import personal from "@/components/personal/personal";
  import mixinCommon from "@/assets/js/mixin-common"

  export default {
    name: "TBKTIndex",
    components: {
      Navigation,
      scrollContainer,
      multiList,
      imglist_w384,
      imglist_w298,
      personal
    },
    mixins: [mixinCommon],
    data() {
      return {
        groups: [0, 1, 2, 3, 4],
        scrollY: 0,
        changePersonal: {},  // 登录的输入信息删除
        personalBg: require("@/assets/images/personal/personal_bg.png"),  //登录的背景图
        showPersonal: false,  // 是否显示登录
        gotoUrl: "",  // 登录成功后的跳转地址
        gotoObjid: "", // 跳转时所在的焦点
        head: {   // 模块四边信息
          top: "100-1"
        },
        groupDatas: {
          dataArr: [
            {
              maxLine: 4,
              dynamic: false,
              title: "",
              data: [{
                title: "校公开课",
                cover: require("../../assets/images/tbkt/nav1_0.png")
              },
                {
                  title: "微课堂",
                  cover: require("../../assets/images/tbkt/nav1_1.png")
                },
                {
                  title: "名师公开课",
                  cover: require("../../assets/images/tbkt/nav1_2.png")
                },
                {
                  title: "华数课堂",
                  cover: require("../../assets/images/tbkt/nav1_3.png")
                }
              ],
              focObj: []
            },
            {
              maxLine: 4,
              dynamic: true,
              title: "",
              data: [],
              focObj: []
            },
            {
              maxLine: 5,
              dynamic: true,
              title: "", //观看历史
              data: [],
              focObj: []
            },
            {
              maxLine: 4,
              dynamic: true,
              title: "", //
              data: [],
              focObj: []
            },
            {
              maxLine: 4,
              dynamic: true,
              title: "", //
              data: [],
              focObj: []
            }
          ],
          focArr: [
            [],
            [],
            [],
            [],
            []
          ]
        }
      };
    },
    methods: {
      closePersonal() {
        this.showPersonal = false;
        if (typeof this.gotoUrl === 'function' && this.$refs.personal.getStudent()) {
          this.gotoUrl()
        } else {
          this.hs.initFocus(this.gotoObjid)
        }
      },
      goPlay(folderCode, contentId, contentType) {
        // this.$store.commit("setAppShow", false);
        let _this = this
        let url =
          "http://ips-4k.hzdtv.tv/dataquery/gotoAuthPlay?folderCode=" +
          folderCode +
          "&contentId=" +
          contentId +
          "&contentType=" +
          contentType;
        this.hs.ajax.get(
          url,
          _responseText => {
            let res = JSON.parse(_responseText);
            //console.log(res);
            if (res.result == "0" || res.result == 0) {
              if (res.authResult == 0) {
                let url =
                  "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" +
                  folderCode +
                  "&contentId=" +
                  contentId +
                  "&contentType=" +
                  contentType +
                  "&playUrlType=rtsp";
                this.hs.ajax.get(
                  url,
                  _responseText => {
                    let res = JSON.parse(_responseText);
                    setTimeout(() => {
                      _this.bridge.gotoApplication2play(res.playUrl);
                    }, 100)
                  },
                  0,
                  3000
                );
              } else {
                _this.bridge.gotoApplication2order({
                  ppvId: res.ppvId,
                  columnAlias: this.folderCode
                });
              }
            }
          },
          0,
          3000
        );
      },
      getIps4kContents(folderCode, dataArr) {
        let flag = false
        let url = "http://ips-4k.hzdtv.tv/dataquery/folderContents" +
          "?folderCode=" + folderCode +
          "&fields=viewpoints&pageItems=20&cImageMode=384,214,JPG&segmentIndex=1&pageIndex=1";
        this.hs.ajax.post(
          "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
          "url=" + encodeURIComponent(url) +
          "&data=&method=get&type=default",
          obj => {
            obj = JSON.parse(obj);
            // console.log(obj);
            if (obj.contents.length > 0) {
              obj.contents.forEach((item, index) => {
                dataArr.data.push({
                  name: obj.contents[index].name,
                  img: {
                    fhd: obj.contents[index].images[0].url
                  },
                  base: {
                    createUser: null,
                    createTime: obj.contents[index].createTime.substring(0, 8)
                  },
                  contentId: obj.contents[index].contentId,
                  contentType: obj.contents[index].contentType
                });
              });
              flag = true
            }
          }, 0, function (msg) {
          }, 3000);
        return flag
      },
      getDataAll() {
        let schoolId = this.$store.state.school.id
        // let schoolId = Object.keys(this.$store.state.user).length > 0 ? this.$store.state.user.clazz.grade.school.id : this.$store.state.school.id
        this.hs.ajax.get("http://" + this.$store.state.domain + "/SMSCH-STB/column/find-all" +
          "?ids[]=" + [5, 13, 35] +
          "&schoolId=" + schoolId,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              //  最新更新
              if (data.body[0].materials.length > 0) {
                this.groupDatas.dataArr[1].title = data.body[0].name
                this.groupDatas.dataArr[1].data = data.body[0].materials.slice(0, 4)
              }

              if (this.getIps4kContents(data.body[1].extra, this.groupDatas.dataArr[3])) {
                // 趣味公开课
                this.groupDatas.dataArr[3].title = data.body[1].name
                this.groupDatas.dataArr[3].folderCode = data.body[1].extra
              }
              if (this.getIps4kContents(data.body[2].extra, this.groupDatas.dataArr[4])) {
                // 流浪地球
                this.groupDatas.dataArr[4].title = data.body[2].name
                this.groupDatas.dataArr[4].folderCode = data.body[2].extra
              }
            }

          }, 0, function (msg) {
          }, 3000);
      }
    },
    created() {
      this.getDataAll()
      this.wasuLog(this.$route.path, '同步课堂')
    },
    mounted() {
      this.hs.initFocus("100-1");

      // 处理所有点击逻辑
      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        // console.log(this.groupDatas[group]);
        if (group === 0) {
          this.setBackObj({
            backFocArr: [this.hs.focObj.objid]
          });
          if (objindex === 0) {
            if (!this.$refs.personal.getStudent()) {
              this.showPersonal = true;
              this.hs.initFocus("105-0");
              this.gotoObjid = objid;
              this.gotoUrl = ()=>{
                this.wasuLog("/tbkt_xgkk", '校公开课')
                this.$router.push("/tbkt_xgkk");
              };
            } else {
              this.wasuLog("/tbkt_xgkk", '校公开课')
              this.$router.push("/tbkt_xgkk");
            }
          } else if (objindex === 1) {
            if (!this.$refs.personal.getStudent()) {
              this.showPersonal = true;
              this.hs.initFocus("105-0");
              this.gotoObjid = objid;
              this.gotoUrl = ()=>{
                this.wasuLog("/tbkt_wkt", '微课堂')
                this.$router.push("/tbkt_wkt");
              };
            } else {
              this.wasuLog("/tbkt_wkt", '微课堂')
              this.$router.push("/tbkt_wkt");
            }
          } else if (objindex === 2) {
            this.setBackObj({
              backFocArr: [this.hs.focObj.objid]
            });
            this.wasuLog("/tbkt/msgkk", '名师公开课')
            this.$router.push("/tbkt/msgkk");
          } else if (objindex === 3) {
            if (!this.$refs.personal.getStudent()) {
              this.showPersonal = true;
              this.hs.initFocus("105-0");
              this.gotoObjid = objid;
              this.gotoUrl = ()=>{
                this.wasuLog("/tbkt_hskt", '华数课堂')
                this.$router.push("/tbkt_hskt");
              };
            } else {
              this.wasuLog("/tbkt_hskt", '华数课堂')
              this.$router.push("/tbkt_hskt");
            }
          }
        } else if (this.groupDatas.dataArr[group].data[objindex].id) {
          if (group === 1 && !this.$refs.personal.getStudent()) {
            this.showPersonal = true;
            this.hs.initFocus("105-0");
            this.gotoUrl = '';
            this.gotoObjid = objid;
            return
          }
          this.goPlay(
            this.groupDatas.dataArr[group].data[objindex].more.folderCode,
            this.groupDatas.dataArr[group].data[objindex].more.contentId,
            this.groupDatas.dataArr[group].data[objindex].more.contentType
          )
        } else if (this.groupDatas.dataArr[group].data[objindex].contentId) {
          this.goPlay(
            this.groupDatas.dataArr[group].folderCode,
            this.groupDatas.dataArr[group].data[objindex].contentId,
            this.groupDatas.dataArr[group].data[objindex].contentType
          );
        }
      });

      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        // console.log(JSON.stringify(focArr) + "**************");
        this.hs.initFocus(focArr[0]);
      }

      this.bridge.whenKeyBack = () => {
        // 当焦点区域在显示登录窗口所在区域的时候,退出登录窗口.
        if (this.hs.focObj.group === 105 || this.hs.focObj.group === 107) {
          // 关闭
          this.closePersonal()
        } else if (this.hs.focObj.group === 106) {
          // 删除
          this.changePersonal = {delete: true}
        } else if (this.$store.state.appShow) {  // 当页面显示的时候就返回首页, 隐藏的时候, 就显示页面
          this.$bridge.callHandler(
            "wasu_function_gotoApplication", {
              packageName: "com.wasu.launcher",
              className: "com.wasu.launcher.MainActivity"
            },
            function (response) {
            }
          );
        }
      };
    }
  };

</script>

<style scoped lang="less">

  .main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;

    .content {
      position: absolute;
      left: 0px;
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      transition-duration: 400ms;
      -webkit-transition-duration: 400ms;

      .container-list {
        padding-top: 235px;
        margin: 0 125px;

        .category-list {
          position: relative;
          display: flex;
          margin-left: -48px;
          margin-right: -48px;
          margin-bottom: 48px;

          .category {
            width: 384px;
            height: 214px;
            overflow: hidden;
            border-radius: 8px;
            margin-left: 48px;
            display: block;
            position: relative;
          }
          @-webkit-keyframes myScale {
            90% {
              -webkit-transform: scale(1.11);
            }
            100% {
              -webkit-transform: scale(1.1);
            }
          }
          .category:before {
            content: "";
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%);
            transform: skewX(-25deg);
            height: 100%;
            width: 45%;
            position: absolute;
            top: 0;
            left: -100%;
            z-index: 11;
          }
          .nav1_img {
            border-radius: 8px;
          }
          .nav1_foc {
            border: 2px solid #ffffff;
            border-radius: 8px;
            -webkit-animation: myScale 100ms;
            -webkit-animation-fill-mode: forwards;
            /*-webkit-animation-delay: 10ms;*/
          }
          .nav1_foc:before {
            left: 150%;
            -webkit-transition: left 1000ms ease-in;
          }
        }
      }
    }
  }

</style>
